<!DOCTYPE html>
<html>
<head>
<#include "/common/common.ftl" parse=true encoding="utf-8">
<style>
body {
	background-color: #F3F3F3;
}

#setInformation {
	padding-top: 20px;
	background-color: #fff;
	padding-left: 20px;
	padding-bottom: 20px;
}

.mt15 {
	margin-top: 15px;
}

.img-thumbnail {
	cursor: pointer;
	width: 150px;
	height: 110px;
	overflow: hidden;
}
</style>
</head>
<body>
<#include "/common/header.ftl" parse=true encoding="utf-8">

	<div class="container body_content">
		<div class="row">
			<ul class="col-md-2" id="set"><#include "/personal/account/sidebar.ftl" parse=true encoding="utf-8">
			</ul>

			<div class="col-md-10">
				<div id="myTabContent" class="tab-content">
					<form class="col-md-offset-1 col-md-11 form-horizontal" id="setInformation" method="post" action="profileSaveAction.do" enctype="multipart/form-data">
						<input type="hidden" id="provinceValue" name="provinceValue" value="${personVo.province!}" />
						<input type="hidden" id="cityValue" name="cityValue" value="${personVo.city!}" />
						<input type="hidden" id="districtValue" name="districtValue" value="${personVo.district!}" />
						<div class="col-md-12 form-group">
							<div class="col-md-2">
								<img id="userAvatarUrl" class="img-thumbnail" width="150" height="100" />
								<input id="userAvatarUrlFile" name="files" type="file" style="display: none;" />
								
							</div>
							<div class="col-md-9">
								<div class="col-md-12">
									<label class="col-md-2 control-label form-control-static text-center">用户名</label>
									<div class="col-md-10">
										<input id="username" name="username" type="text" value="${memberVo.username!}" class="form-control" placeholder="昵称">
									</div>
								</div>
								<div class="col-md-12">
									<label class="col-md-2 control-label form-control-static text-center">电子邮箱</label>
									<div class="col-md-10 form-control-static">${memberVo.email!}</div>
								</div>
								<div class="col-md-12">
									<label class="col-md-2 control-label form-control-static text-center">账号SN</label>
									<div class="col-md-9 form-control-static">${memberVo.sn!}</div>
								</div>
							</div>
						</div>
						<div class="col-md-12 mt15 form-group">
								<label class="col-md-2 control-label form-control-static text-center">最新登录IP</label>
								<div class="col-md-4 form-control-static">${memberVo.lastestLoginIp!}</div>
								<label class="col-md-2 control-label form-control-static text-center">登录总次数</label>
									<div class="col-md-4 form-control-static">${memberVo.totalLoginNum!}</div>
						</div>
						<div class="col-md-12 mt15 form-group">
								<label class="col-md-2 control-label text-center">联系地址</label>
								<div class="col-md-10 ">
									<div class="col-md-4" style="padding-left:0px;">
										<select id="province" name="province" class="form-control">
										</select>
									</div>
									<div class="col-md-4">
										<select id="city" name="city" class="form-control">
										</select>
									</div>
									<div class="col-md-4">
										<select id="district" name="district" class="form-control">
										</select>
									</div>
								</div>
								<div class="col-md-12">
									<br>
								</div>
								<div class="col-md-10 col-md-offset-2">
									<input class="form-control" type="text" id="street" name="street" value="${personVo.street!}" placeholder="街道" maxlength="128" />
								</div>
						</div>
						<div class="form-group">
							<div class=" col-md-offset-10 col-md-2">
								<button type="submit" class="btn btn-primary btn-block btn-flat submit">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<#include "/common/footer.ftl" parse=true encoding="utf-8">
	<script src="${base}/scripts/common/imgphoto.js"></script>
	<script src="${base}/scripts/common/common-area.js"></script>
	<script type="text/javascript">
		$(function(){
	        
	        initLocation();
	        
	        $("#userAvatarUrlFile").uploadPreview({
	            Img : "userAvatarUrl",
	            Width : 160,
	            Height : 90,
	            Callback : function(data){
		            if(data) $("#userAvatarUrl").val('true');
	            }
	        });
	        
	        if("${memberVo.userAvatarUrl!}" != ""){
		        $("#userAvatarUrl").attr('src', "${base}/member/io/uploadPreviewAction.do?filename=${memberVo.userAvatarUrl!}");
	        }else{
		        $("#userAvatarUrl").attr('src', "${base}/styles/images/common/default-avatar.png");
	        }
	        
        })

        function getValue(obj){
	        var value = $(obj).val();
	        var reg = /.+(.JPEG|.jpeg|.JPG|.jpg)$/;
	        if(reg.test(value)){
		        $(obj).next().val(value);
		        $(obj).next().blur();
	        }
        }

        $("#userAvatarUrl").click(function(){
	        return document.getElementById("userAvatarUrlFile").click();
        });
        
        function initLocation(){
	        _init_area();//初始化省市区
	        var province = $('#provinceValue').val();
	        var city = $('#cityValue').val();
	        var district = $('#districtValue').val();
	        if(province.length > 0){
		        $('#province option[value=' + province + ']').prop('selected', 'true');
		        change(1);
		        if(city.length > 0){
			        $('#city option[value=' + city + ']').prop('selected', 'true');
			        change(2);
			        if(district.length > 0){
				        $('#district option[value=' + district + ']').attr('selected', 'true');
			        }
		        }
	        }
        }
        
        $('#defaultForm').bootstrapValidator({
            message : '该项不能为空',
            feedbackIcons : {
	            validating : 'glyphicon glyphicon-refresh'
            },
            submitHandler : function(validator, form, submitButton){
	            validator.defaultSubmit();
            },
            fields : {
	            nickname : {
		            validators : {
		                notEmpty : {
			                message : '昵称不能为空'
		                },
		                stringLength : {
		                    min : 2,
		                    max : 32,
		                    message : '昵称的长度介于2-32字符之间'
		                }
		            }
	            }
            }
        });
	</script>
</body>
</html>